<template>
  <el-container>
    <el-main>
      <div width="200px" class="uploaddiv">
        <el-upload
          class="upload-demo"
          drag
          accept = ".html,.HTML"
          action="/v1/transfer/HtmlToIni"
          :on-error="ceshi"
          :on-remove="handleRemove"
          :on-success = "uploadSuccess"
          clearFiles
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传HTML文件</div>
        </el-upload>
        <a class='download' :href='htmls' download=""  title="下载" v-show="inishow" style="margin-top: 20px">保存INI</a>
        
      </div>
      <div id = "prediv" v-show = "res_show">
          <!-- <pre style="margin-left: 10%">{{ JSON.stringify(res, null, 4)  }}</pre> -->

          <pre style="margin-left: 10%">{{ response}}</pre>

      </div>
    </el-main>
  </el-container> 

</template>

<script>
import axios from 'axios'; 
export default {
    name: 'toIni',
    data() {
        return {
          htmls: "", // 将要上传的formdata数据
          inishow:false,
          res_show:false,
          response:""
        }
    },
    methods: {
      ceshi(err, file, fileList){
        console.log(err, file, fileList);
      },
      ShowIni(){
        var that = this;
        axios.get(that.htmls).then(function (response) {
          that.response = response.data;
          that.res_show = true;
        }).catch()
      },
      saveFile: function () {
        // window.location.href = this.htmls;
        window.open(this.htmls);

        // this.saveFile(htmls);
      
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      uploadSuccess: function (f) {
        var that = this;
        if (f.code == 200) {
          that.htmls = f.data;
          if (that.htmls != "") {
            that.inishow = true;
            that.ShowIni();
            that.$message({
              message: 'ini生成成功',
              type: 'success'
            });
            
          }else{
             that.$message({
              message: 'ini生成失败，请确认html文件是否正常',
              type: 'warning'
            });
            
          }
          
        }else{
          that.$message({
              message: 'ini生成失败，请确认html文件是否正常',
              type: 'warning'
            });
        }
        

      }

      

    }

}
</script>

<style type="text/css">
  .uploaddiv{
    text-align: center;
    margin-top: 2%;
    margin-bottom: 10%;
    /*background: #EADDDD;*/
  }
  .sub_button{
    margin-top: 10%;
  }
  .download{
    
  }
  #prediv{
        /*height: 1000px;
        width: 1000px;*/
        /*text-align: center;*/
        background: #F0EFF2;
        margin-top: 10%;
        margin-left: 10%;
    }
</style>
